<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城官网</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/all_goods.css">
</head>

<body>
    <!-- 1.头部 -->
    <div class="head">
        <div class="center">
            <div class="left">
                <h5>
                    <img src="./img/clock.png">
                    <span>在线时间 08:30~21:30</span>
                </h5>

                <p>
                    欢迎访问家用设备在线商城!
                </p>
            </div>

            <div class="right">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#"><img src="./img/gwc.png"><span>1</span></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 2.导航栏 -->
    <div class="nav">
        <div class="center">
            <h3>XXX官网商城</h3>
            <div class="other">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">所有商品</a></li>
                    <li><a href="#">商城动态</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">线下门店</a></li>
                </ul>
                <div class="search">
                    <input type="text" placeholder="请输入关键字">
                    <button>搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 3.breadcrumbs -->
    <div class="breadcrumbs">
        <div class="center">
            <a href="#">首页</a> / <span>所有商品</span>
        </div>
    </div>

    <!-- 4 5 6 7 商品 -->
    <!-- 4无人机 -->
    <div class="goods">
        <div class="title">
            <div class="center">
                <h4>四轴航拍无人机<span>科技改变生活</span></h4>
            </div>
        </div>
        <div class="center">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/u1.jpg">
                        </div>
                        <div class="text">
                            <span>四轴航拍无人机</span>
                            <span>4K只能航拍无人机 入门良选</span>
                            <span>￥8900</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/u2.jpg">
                        </div>
                        <div class="text">
                            <span>四轴航拍无人机001</span>
                            <span>4K只能航拍无人机 入门良选</span>
                            <span>￥10900</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/u3.jpg">
                        </div>
                        <div class="text">
                            <span>四轴航拍无人机002</span>
                            <span>4K只能航拍无人机 入门良选</span>
                            <span>￥8900</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/u4.jpg">
                        </div>
                        <div class="text">
                            <span>四轴航拍无人机B03</span>
                            <span>4K只能航拍无人机 入门良选</span>
                            <span>￥5900</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/u5.jpg">
                        </div>
                        <div class="text">
                            <span>四轴航拍无人机0063</span>
                            <span>4K只能航拍无人机 入门良选</span>
                            <span>￥8900</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/u6.jpg">
                        </div>
                        <div class="text">
                            <span>四轴航拍无人机042</span>
                            <span>4K只能航拍无人机 入门良选</span>
                            <span>￥12000</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 5VR眼镜 -->
    <div class="goods">
        <div class="title">
            <div class="center">
                <h4>身临其境的VR体验<span>科技改变生活</span></h4>
            </div>
        </div>
        <div class="center">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/vr1.jpg">
                        </div>
                        <div class="text">
                            <span>VR1代头戴眼镜</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/vr2.jpg">
                        </div>
                        <div class="text">
                            <span>VR2代头戴眼镜</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/vr3.jpg">
                        </div>
                        <div class="text">
                            <span>VR3代头戴眼镜</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/vr4.jpg">
                        </div>
                        <div class="text">
                            <span>VR4代头戴眼镜</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/vr5.jpg">
                        </div>
                        <div class="text">
                            <span>VR5代头戴眼镜</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/vr6.jpg">
                        </div>
                        <div class="text">
                            <span>VR6代头戴眼镜</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 6平衡车 -->
    <div class="goods">
        <div class="title">
            <div class="center">
                <h4>绿色出行电动车<span>节能环保新主张</span></h4>
            </div>
        </div>
        <div class="center">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/car1.jpg">
                        </div>
                        <div class="text">
                            <span>独轮车</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/car2.jpg">
                        </div>
                        <div class="text">
                            <span>踏板平衡车</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/car3.jpg">
                        </div>
                        <div class="text">
                            <span>踏板平衡车</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/car4.jpg">
                        </div>
                        <div class="text">
                            <span>踏板平衡车</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/car5.jpg">
                        </div>
                        <div class="text">
                            <span>踏板平衡车</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/car6.jpg">
                        </div>
                        <div class="text">
                            <span>独轮车</span>
                            <span>电影手机专业3D虚拟现实智能眼镜</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 7手表 -->
    <div class="goods goods-l">
        <div class="title">
            <div class="center">
                <h4>智能手表<span>科技改变生活</span></h4>
            </div>
        </div>
        <div class="center">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/wacth1.png">
                        </div>
                        <div class="text">
                            <span>智能手表 smartwatch</span>
                            <span>实时监测体温、血压、心率</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/wacth2.png">
                        </div>
                        <div class="text">
                            <span>智能手表 smartwatch</span>
                            <span>实时监测体温、血压、心率</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/wacth3.png">
                        </div>
                        <div class="text">
                            <span>智能手表 smartwatch</span>
                            <span>实时监测体温、血压、心率</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/wacth4.png">
                        </div>
                        <div class="text">
                            <span>智能手表 smartwatch</span>
                            <span>实时监测体温、血压、心率</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/wacth5.png">
                        </div>
                        <div class="text">
                            <span>智能手表 smartwatch</span>
                            <span>实时监测体温、血压、心率</span>
                            <span>￥1980</span>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./img/wacth6.png">
                        </div>
                        <div class="text">
                            <span>智能手表 smartwatch</span>
                            <span>实时监测体温、血压、心率</span>
                            <span>￥2100</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>



    <!-- 11页尾 -->
    <div class="foot">
        <!-- 12页尾1 -->
        <div class="foot1">
            <div class="center">
                <div class="left">
                    <ul>
                        <li>
                            <h4>About Change</h4>
                            <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                        </li>

                        <li>
                            <h4>Service</h4>
                            <p>消費者保障服务</p>
                            <p>七天无理由退款</p>
                            <p>假一赔三</p>
                        </li>

                        <li>
                            <h4>About Color</h4>
                            <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                        </li>

                        <li>
                            <h4>Online Payment</h4>
                            <p>
                                <img src="./img/yinglian.png" alt="">
                                <img src="./img/zhifubao.png" alt="">
                                <img src="./img/weixin.png" alt="">
                            </p>
                        </li>

                        <li>
                            <h4>Online Payment</h4>
                            <p>非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                        </li>

                        <li>
                            <h4>Wechat</h4>
                            <p>非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                        </li>
                    </ul>
                </div>

                <div class="right">
                    <div>
                        <h4>Social App</h4>
                        <img src="./img/app.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <!-- 13页尾2 -->
        <div class="foot2">
            <div class="center">
                <ul>
                    <li>
                        <h4>关于产品</h4>
                        <span>about color</span>
                        <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                    </li>

                    <li>
                        <h4>关于退货</h4>
                        <span>about change</span>
                        <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                    </li>

                    <li>
                        <h4>责任声明</h4>
                        <span>about color</span>
                        <p>本店商品均为易碎品，非质量问题谢绝退货，如有质量问题，本店承担运费调换</p>
                    </li>

                    <li>
                        <h4>扫码关注</h4>
                        <span>about change</span>
                        <img src="./img/erweima.jpg" alt="">
                        <p>搜索微信号: youzhifang17</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>